<template>
	<div class="content">
		<div class="header">
			<div class="text" @click="goCard">我的银行卡</div>
			<div class="money">{{obj.balance}}</div>
			<div class="ke">可提现金额</div>
			<div class="like" @click="tixian">立即提现</div>
		</div>
		<div class="leiji">累计提现{{obj.money}}元</div>
		<div class="container">
			<div class="top">
				<div class="left">提现日期</div>
				<div class="left">提现金额</div>
			</div>
			<div class="box" v-if="arr.length == 0">暂无提现</div>
			<div v-else class="colmun" v-for="(item,index) in arr" :key="index">
				<div class="time">{{item.create_time_text}}</div>
				<div class="status">{{item.state_text}}</div>
				<div class="status" style="width: 18.66vw;text-align: right;">{{item.price}}</div>
			</div>
		</div>
		<div class="shuoming">
			<div class="top">
				提现说明
			</div>
			<div class="item">{{rule}}</div>
		</div>
	</div>
</template>
<script>
export default {
    data(){
        return{
            userinfo: {},
            showList:[],
            ruleList:{},
            have_card: false,
            page: 1,
            last_page:1,
			obj:{},
			rule:'',
			arr:[]
        }
	},
	mounted() {
		this.loadMoney();
		this.loadRule();
		this.loadCard();
	},
    methods: {
		loadRule(){
			this.$http.post('/api/rate/rule',{type:1}).then(res => {
                // console.log(res)
                this.rule = res.data
            })
		},
		loadCard(){
			this.$http.post('/api/withdraw/bankList').then(res => {
				// console.log(res)
				if(res.data.data.length == 0){
					this.have_card = false;
				}else{
					this.have_card = true;
				}
			})
		},
		loadMoney(){
			this.$http.post('/api/withdraw/record',{page:1,limit:10000}).then(res => {
				// console.log('111',res)
				this.obj = res.data;
				this.arr = res.data.info.data
			})
		},
        goCard(){
            this.$router.push({path:'/card'})
        },
        tixian(){
			if(this.have_card){
				this.$router.push({path:'/money'})
			}else{
				this.$router.push({path:'/card'})
			}
        }
    },
}
</script>
<style lang="scss" scoped="scoped">
.box{
	text-align: center;
	margin: 1.25rem 0;
}
    .content{
		background-color: #F7F7F7;
        min-height: 100vh;
	}
	.header{
		width: 100%;
		// height: 375rpx;
		background-color: #E7BC86;
		padding: 4vw;
		box-sizing: border-box;
		.text{
			font-size:15px;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(255,255,255,1);
			text-align: right;
		}
		.money{
			font-size:36px;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(255,255,255,1);
			margin-top: 1.8125rem;
			text-align: center;
		}
		.ke{
			font-size:14px;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(255,255,255,1);
			margin-top: 36rpx;
			width: 100%;
			text-align: center;
		}
		.like{
			width:29.333vw;
			height:9.33vw;
			background:rgba(28,184,85,1);
			border-radius:35px;
			margin: 4vw auto 0;
			line-height: 9.33vw;
			text-align: center;
			color: #FFFFFF;
		}
	}
	.leiji{
		width:100%;
		height:11.733vw;
		background:rgba(243,243,243,1);
		font-size:18px;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
		line-height: 11.733vw;
		text-align: center;
	}
	.container{
		padding: 4vw 0 4vw 0rpx;
		box-sizing: border-box;
		
		.top{
			display: flex;
			justify-content: space-between;
			padding: 2vw 4vw 2vw;
			box-sizing: border-box;
			border-bottom: 1px solid #EDEDED;
			.left{
				font-size:15px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(153,153,153,1);
			}
		}
		.colmun{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 15.866vw;
			width: 100%;
			padding: 0 4vw;
			box-sizing: border-box;
			border-bottom: 1px solid #EDEDED;
			background-color: #FFFFFF;
			.time{
				font-size:14px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.status{
				font-size:15px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(231,188,134,1);
			}
		}
	}
	.shuoming{
		margin-top: .625rem;
		padding: 4vw;
		box-sizing: border-box;
		width: 100%;
		height: 52.266vw;
        background-color: #fff;
		.item{
			font-size:15px;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
			margin-top: 40rpx;
		}
		.top{
			font-size:17px;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
		}
	}
</style>